
<template>
  <div class="container">
    <!-- 搜索部分 -->
    <header>
      <!-- 搜索和输入 -->
      <div class="left">
        <i></i>
        <h6 @click="goserach">请输入图书名称</h6>
      </div>
      <!-- 购物车 -->
      <div class="right" @click="goCar">
        <img src="../assets/img/buy_empty.png" alt="" v-if="carnum == 0" />
        <img
          src="../assets/img/bk-buy-h.439cdfb.png"
          alt=""
          v-if="carnum != 0"
        />
      </div>
    </header>

    <!-- 书城 -->
    <div class="title">
      <h1>书城</h1>
    </div>

    <!-- 广告图 -->
    <div class="main">
      <div class="box">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
          <van-swipe-item v-for="item in bannerData" :key="item.goodkey">
            <img :src="item.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 选择栏 -->
    <div class="choose">
      <!-- 综合 -->
      <div :class="['text', Index == 0 ? 'items' : '']">
        <h4 @click="zonghe">综合</h4>
      </div>
      <!-- 销量 -->
      <div class="text" :class="['text', Index == 1 ? 'items' : '']">
        <h4 @click="xiaoliang">销量</h4>
      </div>

      <!-- 价格 -->
      <div class="text" :class="['text', Index == 2 ? 'items' : '']">
        <h4 @click="price">价格</h4>
        <i v-show="Index!=2"></i>
        <i v-show="Index==2" :class="[low?'icon2':'icon']"></i>
      </div>
      <!-- 筛选 -->
      <!-- <div class="text" :class="['text', Index == 3 ? 'items' : '']">
        <h4>筛选</h4>
        <van-cell is-link @click="showPopup" class="tostyle">筛选</van-cell>
        <van-popup v-model:show="show" position="right"
          :style="{ width: '80%', height: '100%' }">内容</van-popup>

        
        <i></i>
      </div> -->
    </div>

    <!-- 全部书本介绍栏目 -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="mains">
        <div
          class="box"
          v-for="item in bookData"
          :key="item.key"
          @click="goShop(item.key)"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>

          <div class="right">
            <h5>{{ item.title }}</h5>

            <div class="bottom">
              <h5>{{ item.saleNum }}人购买</h5>
              <h6>
                <span>{{ item.price }}</span
                >{{ item.disprice }}
              </h6>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>

  <bottomNav></bottomNav>
</template>


<script>
import bottomNav from "@/components/bottomNav.vue";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { getBookData, getBookShopData } from "../assets/api/home";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import store from "@/store";
import 'vant/es/toast/style';

export default {
  components: { bottomNav },
  setup() {
    //判断购物车是否有内容
    let carnum = ref(0);
    let carData = () => {
      carnum.value = store.state.shoppingCar.length;
      // console.log(carnum.value);
    };
    // 下拉刷新
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        getBookShopData().then((data) => {
          bannerDataFun.bookData = data.data.results.list;
          // console.log(bannerDataFun.bookData);
          loading.value = false;
          Toast("刷新成功");
        });
      }, 1000);
    };

    //获取数据
    let bannerDataFun = reactive({
      bannerData: [],
      bookData: [],

      Index: 0,
    });
    //轮播图数据
    let getBookDataFun = () => {
      getBookData().then((data) => {
        // console.log(data);
        //获取轮播图的图片
        bannerDataFun.bannerData = data.data.results.list;
      });
    };
    //书本书籍数据
    let getBookShopDataFun = () => {
      getBookShopData().then((data) => {
        bannerDataFun.bookData = data.data.results.list;
        // console.log(bannerDataFun.bookData);

        console.log(bannerDataFun.bookData);
      });
    };
    getBookDataFun();
    getBookShopDataFun();

    let router = useRouter();
    // 跳转到搜索页
    let goserach = () => {
      router.push({
        path: "/serach",
      });
    };

    // 跳转购物车
    let goCar = () => {
      router.push({
        path: "/shoppingcar",
      });
    };
    //跳转详情
    let goShop = (id) => {
      // console.log(id);
      router.push({
        path: "/shopping",
        query: {
          key: id,
        },
      });
    };
    let totag = ref(0);
    let toprice = ref(0);
    let low = ref(true)
    //销量
    let xiaoliang = () => {
      bannerDataFun.Index = 1;

      let tem = null;

      //单次点击
      if (totag.value % 2 != 0) {
        //排序
        for (var i = bannerDataFun.bookData.length; i > 0; i--) {
          for (var j = 0; j < i - 1; j++) {
            if (
              parseInt(bannerDataFun.bookData[j].saleNum) >
              parseInt(bannerDataFun.bookData[j + 1].saleNum)
            ) {
              tem = bannerDataFun.bookData[j];
              bannerDataFun.bookData[j] = bannerDataFun.bookData[j + 1];
              bannerDataFun.bookData[j + 1] = tem;
            }
          }
        }

        // console.log(totag.value);
      } else {
        bannerDataFun.bookData = bannerDataFun.bookData.reverse();
        //  console.log(totag.value);
      }
      totag.value += 1;
    };

    //价格
    let price = () => {
      bannerDataFun.Index = 2;
      let tem = null;
      if (toprice.value % 2 != 0) {
        for (var i = bannerDataFun.bookData.length; i > 0; i--) {
          for (var j = 0; j < i - 1; j++) {
            if (
              parseFloat(bannerDataFun.bookData[j].disprice) >
              parseFloat(bannerDataFun.bookData[j + 1].disprice)
            ) {
              tem = bannerDataFun.bookData[j];
              bannerDataFun.bookData[j] = bannerDataFun.bookData[j + 1];
              bannerDataFun.bookData[j + 1] = tem;
            }
          }
        }
      }else{
        bannerDataFun.bookData = bannerDataFun.bookData.reverse();
      }
      toprice.value+=1
      low.value=!low.value
    };

    let zonghe = () => {
      bannerDataFun.Index = 0;
    };
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    carData();

    return {
      ...toRefs(bannerDataFun),
      goShop,
      goserach,
      goCar,
      xiaoliang,
      price,
      zonghe,
      loading,
      onRefresh,
      carData,
      carnum,
      low,
      showPopup,
      show
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

::v-deep .van-cell__right-icon{
  display: none;
}
::v-deep .van-cell{
  padding: 0px;
  padding-left: 25px;
}
::v-deep .van-cell__value--alone{
  color: #c5c6ca;
  font-weight: bold;
}
/* 开头搜索 */
header {
  display: flex;
  /* margin: 0px 0px; */
  padding: 0 15px;
  position: sticky;
  top: 0px;
  padding-top: 9px;
  padding-bottom: 9px;
  background-color: #ffffff;
  z-index: 2;
}

header .left {
  flex: 1;
  display: flex;
  background-color: #f2f2f2;
  height: 27px;
  align-items: center;
  border-radius: 6px;
}

header .left h6 {
  color: #222831;
  font-size: 14px;
  flex: 1;
}

header .left i {
  display: block;
  margin: 0px 10px;
  background-image: url(../assets/img/search1.png);
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
}

header .right img {
  display: block;
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
  margin-left: 14px;
}

/* 书城 */
.container > .title {
  display: flex;
  margin-left: 15px;
}

.container > .title h1 {
  height: 62px;
  line-height: 62px;
  font-weight: bold;
  font-size: 24px;
}

// 轮播图
.main {
  margin: 0px 15px 14px 15px;
}

.main .box {
  border-radius: 5px;
  overflow: hidden;
}

.my-swipe {
  height: 127px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 127px;
  text-align: center;
  width: 100%;
  height: 100%;

  img {
    height: 100%;
    width: 100%;
  }
}

/* 选择项 */
.choose {
  height: 36px;
  display: flex;
  align-items: center;
  /* margin: 0px 15px; */
  align-items: center;
  box-shadow: 0px 6px 8px #f1f1f1;
  position: sticky;
  top: 45px;
  background-color: #ffffff;
}

.choose .text {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c5c6ca;
}

.choose .text h4 {
  font-size: 15px;
  font-weight: 600;
}

.choose .items > h4 {
  font-weight: bold;
  color: #17313e;
}
.choose .items  .tostyle {
  font-weight: bold;
  color: #17313e;
}


.choose .text:nth-child(3) i {
  display: block;
  background-image: url(../assets/img/choose2.png);
  width: 7px;
  height: 9px;
  background-size: 7px 9px;
  margin-left: 6px;
}
.choose .text:nth-child(3) i.icon2 {
  display: block;
  background-image: url(../assets/img/ic_sort2.ac2bb42.png);
  width: 7px;
  height: 9px;
  background-size: 7px 9px;
  margin-left: 6px;
}
.choose .text:nth-child(3) i.icon {
  display: block;
  background-image: url(../assets/img/ic_sort1.f391f82.png);
  width: 7px;
  height: 9px;
  background-size: 7px 9px;
  margin-left: 6px;
}

.choose .text:nth-child(4) > i {
  display: block;
  background-image: url(../assets/img/choose.png);
  width: 11px;
  height: 12px;
  background-size: 11px 12px;
  margin-left: 6px;
  background-repeat: no-repeat;
  position: absolute;
  right: 18px;
}

/* 项目 */
.mains {
  padding-bottom: 50px;
}

.mains .box {
  display: flex;
  margin-top: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
  margin-left: 15px;
}

.mains .box .left {
  width: 24%;
  padding: 13px 0;

  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0px 2px 8px #c4c4c4;
}

.mains .box .left img {
  width: 100%;
}

.mains .box .right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin: 13px 0px 13px 10px;
  padding-right: 15px;
}

.mains .box .right > h5 {
  font-weight: bolder;
}

.mains .box .right .bottom {
  display: flex;
  justify-content: space-between;
}

.mains .box .right .bottom h5 {
  font-size: 12px;
  color: #212121;
}

.mains .box .right .bottom h6 {
  font-size: 16px;
  font-weight: bold;
}

.mains .box .right .bottom h6 span {
  text-decoration: line-through;
  font-size: 12px;
  color: #d5d4d9;
  margin-right: 7px;
}
</style>